import React ,{Component}from 'react';
import {connect} from 'react-redux'
import Header from '../../components/Header'
import {getHomeList} from './store/actions'

class Home extends Component{
  componentDidMount(){
   if(!this.props.list.length){
     //  只有没有数据的时候才去请求客户端的数据
      this.props.getHomeList()
   }
  }

  getList(){
    const {list} = this.props;
    return list.map(item=><div key={item.id}>{item.title}</div>)
  }

  render(){
    return (
      <div>
        <Header />
        {this.getList()}
        <button onClick={()=>{alert('click')}}>click</button>
      </div>
    )
  }
} 

Home.loadData = (store)=>{
  //  这个静态函数，负责在服务器端渲染之前，把这个路由需要的数据提前加载好
  return store.dispatch(getHomeList())
}

const mapStateToPorps = state =>({
  list:state.home.newsList
})

const mapDispatchToProps = dispatch =>({
  getHomeList(){
    dispatch(getHomeList())
  }
})

export default connect(mapStateToPorps,mapDispatchToProps)(Home);